<template>
  <div class="app-container">
    <Form
      v-if="showSearch"
      v-model:formData="searchInfo"
      :formItems="formItems"
    >
      <template #footer>
        <div style="text-align: left">
          <el-button size="small" icon="Search" type="primary" @click="goSearch"
            >搜索</el-button
          >
          <el-button size="small" icon="Refresh" @click="resetSearch"
            >重置</el-button
          >
        </div>
      </template>
    </Form>
    <h3>
      <el-button
        type="primary"
        icon="Download"
        @click="exportOrder"
        size="small"
        >导出</el-button
      >
    </h3>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"> </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="resetSearch"
      ></right-toolbar>
    </el-row>
    <h3></h3>
    <x-table
      :propList="propList"
      :tableData="info.items"
      :isLoading="isLoading"
      isShowCheckBox
      @selection-change="handleSelectionChange"
    >
      <template #type="{ row }">
        <el-tag type="success" v-if="row.type == 1"> 加款 </el-tag>
        <el-tag v-if="row.type == 2"> 扣款 </el-tag>
        <el-tag type="warning" v-if="row.type == 3"> 消费 </el-tag>
        <el-tag type="danger" v-if="row.type == 4"> 退款 </el-tag>
      </template>
      <!-- <template #op="{ row }">
        <el-button type="primary"
link icon="Edit" @click="change(row)">编辑</el-button>
        <el-button type="primary"
link icon="Delete" @click="del(row)">删除</el-button>
      </template> -->
    </x-table>
    <pagination
      v-show="info.total > 0"
      :total="info.total"
      v-model:page="searchInfo.pageNum"
      v-model:limit="searchInfo.pageSize"
      @pagination="getInfo"
    />
    <!-- <Dialog width="30%" title="内容" v-model:isShowDialog="isShowDialog">
      <Form ref="formRef" v-bind="dialogConfig.formConfig"> </Form>
    </Dialog> -->
  </div>
</template>

<script>
import { propList, formItems } from "./config";
import { getList } from "@/api/member/balanceLog";
export default {
  name: "merchantbalanceLogindex",
  data() {
    return {
      isLoading: false,
      curItem: {},
      showSearch: true,
      isShowDialog: false,
      propList,
      formItems,
      info: {},
      checkList: [],
      searchInfo: {
        pageNum: 1,
        pageSize: 10,
        created_at: this.getTimeFilterDefault(true),
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      const params = { ...this.searchInfo };
      const { data } = await getList(params);
      this.info = data;
    },
    resetSearch() {
      this.searchInfo = this.$options.data.call(this).searchInfo;
      this.searchInfo.created_at = this.getTimeFilterDefault(true);
      this.getInfo();
    },
    goSearch() {
      // 重置时间
      this.getInfo();
    },
    handleSelectionChange(e) {
      console.log(e);
      this.checkList = e;
    },
    change(item) {
      // 修改
    },
    del(item) {
      // 删除
    },
    exportOrder() {
      // 导出勾选的订单
      // const orderIds = this.ids || [];
      const orderIds = this.checkList.map((item) => item.id) || [];
      console.log(orderIds);
      if (orderIds.length) {
        this.download(
          "member/balanceLog/exportData",
          { ids: orderIds },
          "商户资金明细导出[" + this.parseTime(new Date().getTime()) + "].csv"
        );
      } else {
        const obj = { ...this.searchInfo };
        // obj.created_at = [obj.params.beginTime, obj.params.endTime];
        // delete obj.params;
        this.download(
          "member/balanceLog/exportData",
          obj,
          "商户资金明细导出[" + this.parseTime(new Date().getTime()) + "].csv"
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
